<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>课后共管在线课堂</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="libs/thirdpart/elementui/index.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_1673801_33599br4l8l.css">
  <link rel="stylesheet" href="styles/style.css">
  <script src="libs/thirdpart/vue.js"></script>

  <!-- 引入组件库 -->
  <script src="libs/thirdpart/elementui/index.js"></script>

</head>

<body>
  <div id="app_box" class="play-live flex flex-v">
    <!-- header -->
    <div class="header flex flex-align-center" v-if="isTeacher">
      <div class="logo">
        <img src="./images/logo.svg">
      </div>
      <div class="title flex1">
        {{ title }}
      </div>
      <div class="opreate flex flex-align-center">
        <a class="iconfont icon-shu"></a>
        <a class="iconfont icon-xuesheng1" ></a>
        <a class="iconfont icon-duogongnengshitu" ></a>
        <!-- <a class="iconfont icon-shezhi" @click="toggleModal"></a> -->
        <a class="iconfont icon-shezhi"></a>
        <a class="iconfont icon-zhuyi" ></a>
        <a class="btn">上课</a>
      </div>
      <div class="user flex flex-align-center">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583730495790&di=3a3c8547b81187985756a4f8e6e0e4c3&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_pic%2F17%2F08%2F04%2F2e3766797f7bb55be468b3142c3fb645.jpg">
        {{ userInfo.name }}
      </div>
    </div>
    <!-- 摄像头 -->
    <div class="camera flex flex-align-center" :class="{ 'wxapp': !isTeacher, 'big': isBig}">
      <div class="teacher-camera" id="teacher-camera">
        <i class="iconfont icon-quanping" @click="toggleTeacherCameraSize" v-if="!isTeacher"></i>
        <div class="camera-item" v-if="!hasTeacherCamera">
          <img />
          <div class="mask">
            未进入房间或检测不到教师的摄像头
          </div>
        </div>
      </div>
      <div class="student-camera flex1" v-if="isTeacher" @click="toggleTeacherCameraSize">
        <div class="tips">
          在线学生： 1人
        </div>
        <a class="swiper-opreate-btn iconfont icon-xiangzuo" v-if="isTeacher"></a>
        <a class="swiper-opreate-btn iconfont icon-xiangzuo right"  v-if="isTeacher"></a>
        <div id="student-video-warp">
          <div class="camera-item" id="none-student">
            <img />
            <div class="mask">
              暂无学生
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="play-body flex1 flex" :class="{ 'play-body-wxpp': !isTeacher}">
      <!-- 课程列表 -->
      <div class="course-warp flex flex-v" v-if="isTeacher">
        <div class="title">
          课程列表
        </div>
        <div class="course-list flex1">
          <div class="course-item" :class="{ 'active': roomID === room.liveClassId}" v-for="room  in classRooms" :key="room.courseId" @click="selectCourse(room)">
            <div class="name">
              {{ room.courseName }}
            </div>
            <div class="time">
              时间: {{room.beginTime}} ~ {{room.endTime}}
            </div>
          </div>
        </div>
      </div>
      <div class="live-warp flex1 flex flex-v" style="overflow: hidden">
        <!-- 主内容区块 -->
        <div class="live-body flex1 flex flex-v" style="overflow: hidden;min-width: 0;">
          <!-- 白板tab区块 -->
          <div class="live-body-tab">
            <el-tabs size="mini" v-model="currentFileId" closable type="card" @tab-remove="onDeleteFileById"
                  @tab-click="onClickBoardTab">
                  <el-tab-pane size="mini" :key="file.fid" v-for="file in fileInfoList" :label="file.title"
                    :name="file.fid">
                  </el-tab-pane>
            </el-tabs>
          </div>
          <!-- 白板内容区块 -->
          <div id="paint_box" class="live-body-main flex1"></div>
          <!-- PPT翻页区块 -->
            <div style="height: 80px;width:100%;padding-top:5px;overflow:auto" v-if="isTeacher">
              <!--<div style="text-align: center; padding-top: 30px; color: gray;" v-if="thumbUrls.length == 0">此文件不支持缩略图</div>-->
              <div style="overflow-x: scroll visible; overflow-y:hidden; white-space:nowrap; height:inherit;">
                <img style="height: 100%; margin-right: 3px;" v-for="(item, index) in thumbUrls" :name="index" :src="item" v-on:click="onThumbClick(index)"><img>
              </div>
            </div>
          <!-- 工具栏 -->
          <div class="tools" >
            <a class="iconfont icon-shubiao"></a>
            <a class="iconfont icon-huabi" ></a>
            <a class="iconfont icon-ziti" ></a>
            <a class="iconfont icon-xiangpi" ></a>
            <a class="iconfont icon-chexiao" :disabled="!canUndo"></a>
            <!--<a class="iconfont icon-chexiao" :disabled="!canRedo"></a>-->
            <a class="iconfont icon-pingmu"></a>
            <a class="iconfont icon-jiahaotianjia" @click="addBoard"></a>
            <a class="iconfont icon-PPT" @click="addUploadFile">
              <input id="file_input" type="file" style="display: none" @change="uploadFile" accept="image/*, application/pdf, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.ms-powerpoint, application/vnd.ms-excel">
            </a>
            <a class="iconfont icon-shipin" @click="addVideoFile"></a>
            <a class="iconfont icon-liaotian" ></a>
          </div>
        </div>
        <!-- PPT翻页区块 -->
        <!--<div class="ppt-operate flex flex-align-center flex-pack-center">
          <a class="iconfont icon-sanjiaoxing left" ></a>
          <a>1</a>
          <a>/</a>
          <a class="totalpage">15</a>
          <a class="iconfont icon-sanjiaoxing right"></a>
        </div>-->
      </div>
    </div>

    <!-- modal -->
    <div class="modal" v-if="modalVisible">
      <!-- 左边栏 用户登录和登出 -->
        <a @click="modalVisible = false">关闭</a>
          <el-row>
            <el-col>
              <el-tabs type="border-card">
                <el-tab-pane label="账号">
                  <el-form ref="form" label-width="80px" size="mini">
                    <el-form-item label="用户名">
                      <el-select :disabled="status >= STATUS_LOGINED" v-model="account" placeholder="请选择帐号">
                        <el-option v-for="user in users" v-bind:value="user.userId" v-text="user.userId"></el-option>
                      </el-select>
                    </el-form-item>
  
                    <el-form-item>
                      <el-button @click="start" :disabled="status >= STATUS_LOGINED" v-text="'登录'"></el-button>
                    </el-form-item>
  
                    <el-form-item>
                      <el-button @click="logout" :disabled="status < STATUS_LOGINED" v-text="'登 出'"></el-button>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
              </el-tabs>
  
            </el-col>
          </el-row>
          <el-button plain @click="startRTC" type="button" :disabled="status < STATUS_INCLASS" v-text="'摄像头推流'"
          size="mini"></el-button>
          <!--左边栏  房间进入和退出 -->
  
          <el-row>
            <el-col>
              <el-tabs type="border-card">
                <!--右边栏 涂鸦操作 -->
                <el-tab-pane label="课堂">
                  <el-form ref="form" label-width="80px" size="mini">
  
                    <el-form-item label="课堂号">
                      <el-input id="roomid" v-model.trim="roomID" placeholder="课堂ID"></el-input>
                    </el-form-item>
  
                    <el-form-item>
                      <el-button @click="createClassroom" :disabled="status < STATUS_LOGINED || status == STATUS_INCLASS"
                        v-text="'创建房间'"></el-button>
                    </el-form-item>
  
                    <el-form-item>
                      <el-button @click="destroyClassroom" :disabled="status < STATUS_LOGINED" v-text="'销毁房间'">
                      </el-button>
                    </el-form-item>
  
                    <el-form-item>
                      <el-button @click="joinClassroom" :disabled="status < STATUS_LOGINED || status == STATUS_INCLASS"
                        v-text="'进入房间'"></el-button>
                    </el-form-item>
  
                    <el-form-item>
                      <el-button @click="quitClassroom()" :disabled="status < STATUS_LOGINED" v-text="'退出房间'">
                      </el-button>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-row>
    </div>
  </div>

  

  <script src="js/rem.js"></script>
  <script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>

  <!-- AXIOS SDK 白板SDK依赖axios（后续版本会去掉该依赖） -->
  <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/axios/axios.min.js"></script>

  <!-- WebRTC SDK -->
  <!-- <script src="https://sqimg.qq.com/expert_qq/webrtc/3.4.2/WebRTCAPI.min.js"></script> -->
  <script src="./libs/trtc.js"></script>
  <!-- WebIM SDK -->
  <script src="https://resources-tiw.qcloudtrtc.com/webim/webim.min.js"></script>

  <!-- COS SDK -->
  <script src="https://resources-tiw.qcloudtrtc.com/thirdpart/cos/5.1.0/cos.min.js"></script>

  <!-- 白板SDK -->
  <script src="https://resources-tiw.qcloudtrtc.com/board/2.4.0/TEduBoard.min.js"></script>
  <!-- <script src="libs/TEduBoard.min.js"></script> -->

  <!-- TIC SDK 可根据开源代码自行编译TIC-->
  <script src="https://resources-tiw.qcloudtrtc.com/tic/2.4.1/TIC.min.js"></script>
  <!-- <script src="libs/TIC.js"></script> -->

  <script src="libs/thirdpart/purl.js"></script>
  <script src="libs/thirdpart/vconsole.min.js"></script>
  <script src="js/account_dev.js"></script>
  <!-- <script src="account/1400162216.js"></script>
  <script src="account/1400189148.js"></script> -->
  <script src="js/main.js"></script>

  <script>
    if (location.href.indexOf('dev') > -1) {
      var vConsole = new VConsole();
    }
  </script>
</body>

</html>